<template>
	<transition-group name="fade" @enter="onEnter" @leave="onLeave" @appear="onAppear">
		<div class="box" :class="['i' + index]" v-for="(item, index) in list" :key="item">{{ item }}<span
				@click="remove(index)">删除</span></div>
	</transition-group>
	<Row style="margin-top:10px;" :gutter="10">
		<Col>
		<Button type="primary" @click="add">操作1</Button>
		</Col>
		<Col>
		<Button type="primary" @click="random">操作2</Button>
		</Col>
	</Row>
	<draggable v-model="list2" v-bind="dragOptions" :component-data="{ name: 'fade', type: 'transtion-group' }"
		item-key="order">
		<template #item="{ element, index }">
			<div class="box" :class="['i' + index]"> {{ element.name }}
				<Button type="default" class="mybtn">操作</Button>
			</div>
		</template>
	</draggable>
	<Row style="margin-top:10px;">
		<div class="box">b0</div>
		<div class="box b1">b1</div>
	</Row>

	<draggable v-model="nine" class="nineBox" :animation="200" :component-data="{ name: 'fade', type: 'transtion-group' }"
		item-key="order">
		<template #item="{ element, index }">
			<div class="box1" :class="['i' + index]"> {{ element.name }} </div>
		</template>
	</draggable>
	<div class="nineBox">
		<div class="box" v-for="(item, index) in box"></div>
	</div>
</template>

<script>
import draggable from 'vuedraggable'
import { shuffle } from 'lodash'
export default {
	data() {
		return {
			nine: new Array(9).fill(1).map((res, index) => {
				return {
					name: index,
					order: index
				}
			}),
			list: [1],
			list2: [{
				name: 1,
				order: 1
			}, {
				name: 2,
				order: 2
			}, {
				name: 3,
				order: 3
			}, {
				name: 4,
				order: 4
			}],
			dragOptions: {
				animation: 300,
				//拖拽操作按钮
				handle: '.mybtn'
				// group: "description",
				// disabled: false,
				// ghostClass: "ghost"
			}
		}
	},
	components: {
		draggable
	},
	methods: {
		onEnter(e) {
			console.log(`onEnter`);
			console.log(e);
		},
		onLeave(e) {
			console.log(`onLeave`);
			console.log(e);
		},
		onAppear(e) {
			console.log(`onAppear`);
			console.log(e);
		},
		remove(index) {
			this.list.splice(index, 1);
		},
		add() {
			this.list.push(this.list.length + 1);
		},
		random() {
			this.list = shuffle(this.list);
		}
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	&.b1 {
		transition: all .5s ease;
	}
}
.fade-move,
.fade-enter-active,
.fade-leave-active {
	transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
	transform: translateX(30px);
}
.fade-leave-active {
	position: absolute;
}
.nineBox {
	display: grid;
	grid-template-columns: repeat(3, 50px);
	grid-template-rows: repeat(3, 50px);
	.box1 {
		border: 1px solid #000;
	}
}
</style>